<#include "../imports/header.ftl" />

<!-- 表格重载条件区 -->
<div class="BMS-tableFormClass layui-form" id="BMS-tableFormId" layui-filter="BMS-tableFormFilter">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">用户</label>
            <div class="layui-input-inline">
                <select name="manageid">
                <#list data.data as manage>
                    <option <#if (Request.manageid == manage.id)!false >selected</#if>
                            value="${manage.id}">${manage.name}</option>
                </#list>
                </select>
            </div>
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" autocomplete="off" class="layui-input" placeholder="搜索角色名称">
            </div>
        </div>
        <button class="layui-btn" lay-submit="" lay-filter="BMS-tableReloadFilter" lay-event="reload">搜索</button>
    </div>


</div>
<!-- 工具栏 -->
<div class="layui-btn-group" id="BMS-tableBarId">
    <button class="layui-btn layui-btn-danger layui-btn-disabled" disabled lay-event="bindRole"><i class="layui-icon">&#xe605;</i>
    </button>
</div>

<!-- 表格内容区 -->
<table id="BMS-tableId" lay-filter="BMS-tableFilter">
</table>

<!-- 行操作模板 -->
<script type="text/html" id="BMS-trOperateBarId">
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    <a herf="/privilege/action${sysProperties.urlSuffix}" class="layui-btn layui-btn-normal layui-btn-mini"
       lay-event="bindAction">权限</a>
</script>

<!-- 状态行样式模板 -->
<script type="text/html" id="BMS-trStyleStatus">
    {{#  if(d.status === 1){ }}
    <span style="color: #009688;">正常</span>
    {{#  } else { }}
    <span style="color: #FF5722;">锁定</span>
    {{#  } }}
</script>

<!-- 是否导航行样式模板 -->
<script type="text/html" id="BMS-trStyleIsNav">
    {{#  if(d.isnav === 1){ }}
    <i class="layui-icon" style="color:#009688">&#xe605;</i>
    {{#  } }}
</script>

<script>
    var $;
    layui.use(['layer', 'table', 'form', 'bmstable', 'bmsform'], function () {
        var $ = layui.$;
        var bmstable = layui.bmstable;
        var bmsform = layui.bmsform;
        var table = layui.table;
        var form = layui.form;
        var dataCheckedFlag = 'hasPrivilege';// 数据被选中标识
        var tableReloadId = bmstable.config.elems.tableReloadId;
        var url = '/privilege/manage.do';

        var $bindRoleBtn = $('#' + bmstable.config.elems.tableBarId + ' button[lay-event=bindRole]');// 提交按钮
        // 自定义样式
        var trStyleStatusId = 'BMS-trStyleStatus';
        var trStyleIsNavId = 'BMS-trStyleIsNav';// 行isnav样式模板ID

        bmsform.render({
            formId: "BMS-tableFormId"
            , formSubmitFilter: "BMS-tableReloadFilter"
            , submitUrl: url
        });

        var $currForm = $('#' + bmstable.config.elems.formId)
        var getSelectedManageId = function () {
            return $currForm.find('select[name=manageid]').val();
        }

        var manageid = getSelectedManageId();
        /**
         * 第一个参数对象为配置，第二个参数对象为自定义事件，自定义事件一定要是元素的 lay-event 值相对应才能调用
         */
        bmstable.render({
            url: url
            , where: {manageid: manageid}
            , cols: [[
                // 当 hasPrivilege 为 true 时，复选框为选中状态
                {checkbox: true, fixed: true, LAY_CHECKED: dataCheckedFlag}
                , {field: 'id', title: 'ID', width: 80, sort: true}
                , {field: 'name', title: '角色', width: 150}
                , {field: 'createby', title: '创建人', width: 150}
                , {
                    field: 'createtime',
                    title: '创建时间',
                    date: true,
                    width: 200,
                    dateFormat: 'yyyy-MM-dd HH:mm:ss'
                }
            ]]
        }, {
            submitBefore: function(data)
            {
                data.manageid = manageid = getSelectedManageId();
            }
            /**
             * 第二个参数的 checkbox 为表复选框勾选事件
             * @param data
             */
            , checkbox: function (data) {
                // 比对值
                var allData = table.cache[tableReloadId];
                var checkName = table.config.checkName;
                var modified = false;

                for (var item in allData) {
                    item = allData[item];
                    if ((item[checkName] && !item[dataCheckedFlag])//目前被勾选，但原本未选中
                            || (!item[checkName] && item[dataCheckedFlag]))// 目前未被选中，但原本被选中
                    {
                        modified = true;
                        break;
                    }
                }
                if (modified)
                    $bindRoleBtn.removeClass('layui-btn-disabled').removeAttr('disabled');
                else
                    $bindRoleBtn.addClass('layui-btn-disabled').attr('disabled', 'disabled');
            }
            , bindRole: function(data)
            {
                manageid = getSelectedManageId();
                var checkName = table.config.checkName;
                var allData = table.cache[tableReloadId];
                //拼接ID
                var addIds = [], subIds = [];// 增减ID
                layui.each(allData, function (index, item) {
                    if (item[checkName] && !item[dataCheckedFlag])//目前被勾选，但原本未选中
                        addIds.push(item.id);
                    else if (!item[checkName] && item[dataCheckedFlag])// 目前未被选中，但原本被选中
                        subIds.push(item.id);
                })
//                layui.layer.alert('add>' + addIds.join() + ' sub>' + subIds.join());
//                return;
                var addStr = 'addIds=' + addIds.join('&addIds=') + '&';
                var subStr = 'subIds=' + subIds.join('&subIds=');

                // 提交
                $.ajax({
                    type: 'put', url: url, data: addStr + subStr+"&manageid=" + manageid
                    , success: function () {
                        bmstable.active.reload();
                        $bindRoleBtn.addClass('layui-btn-disabled').attr('disabled', 'disabled');
                    }
                })
            }
        });
    });
</script>



<#include "../imports/footer.ftl" />